//定义懒加载插件,里面提供一个方法
import { useIntersectionObserver } from '@vueuse/core'

//intersection对函数的监听一直存在，除非手动停止 不然存在内存浪费
export const lazyPlugin = {
install (app){
  //懒加载指令逻辑
  app.directive('img-lazy',{
  mounted(el,binding){
    //el 指令绑定的元素 img
    //binding是 binding.value 指令等于号后面绑定的表达式的值
    // console.log(el,binding.value)
    const { stop } = useIntersectionObserver(
  el,
  ([{isIntersecting}]) => {
    // console.log(isIntersecting)
    if(isIntersecting){
      //进入视窗区域，发送请求
      el.src=binding.value
      // console.log(el)
      //第一次完成赋值后停止
      stop()
    }
  },
)
  }
})


}
}
